<template>
	<view class="">
		<uni-popup ref="popup" :mask-click="false">
			<text :style="{height: (windowHeight - 50) + 'px'}" class="messageText">{{message}}</text>
			<button style="height: 50px;" @click="close">关闭</button>
		</uni-popup>

		<uni-notice-bar scrollable show-get-more show-icon more-text="获取最新" :text="notificationInformation" @getmore="getNew" />

		<uni-card :border='false' padding='0' spacing='0' v-for="(feature, index) of featureList" :key="index"
			@click="goToAdd(feature)">
			<div style="display: flex; height: 100px; justify-content: space-between;"
				:style="{backgroundColor: feature.backgroundColor + ''}">
				<div class="iconCenter" style="flex: 2;margin-left: 5px;">
					<span style="font-size: 30px;" class="iconfont" :class="feature.icons"></span>
				</div>
				<div style="flex: 6;">
					<p style="font-size: 16px; font-weight: bold;height: 50px; line-height: 50px; color: #250911;">
						{{feature.title}}
					</p>
					<p style="font-size: 12px; font-weight: bold;height: 50px;">{{feature.info}}</p>
				</div>
				<div class="iconCenter" style="flex: 1;">
					<uni-icons type="forward" size="20"></uni-icons>
				</div>
			</div>
		</uni-card>

		<uni-card v-if="userInfo.userType === '1'">
			<uni-forms-item label="通知信息:" name="introduction">
				<uni-easyinput type="textarea" v-model="notificationInformation" placeholder="" />
			</uni-forms-item>
			<button type="primary" @click="submit">修改</button>
		</uni-card>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import baseUrl from '../../publicData/baseUrl.js'
	export default {
		name: "myAdd",
		data() {
			return {
				message: '该功能尚未完成！敬请等待！', // 
				notificationInformation: '',
				windowHeight: 0, // 窗口高度
				featureList: [{
						id: 1,
						icons: 'icon-tianjiashangpin',
						title: '上传二手物品',
						info: '快出售你的闲置物品吧',
						backgroundColor: "#1ABEB9",
						path: '../../packagesAdd/addUsedGoods'
					},
					{
						id: 2,
						icons: 'icon-yuanwanghe',
						title: '求二手(开发中...)',
						info: '向大佬们求购闲置物品',
						backgroundColor: "#F7F5DD",
						path: '../../packagesAdd/addAskSecondhand'
					},
					{
						id: 3,
						icons: 'icon-biaobai',
						title: '发表白墙',
						info: '想大声说爱你，我要表白',
						backgroundColor: "#D21B4C",
						path: '../../packagesAdd/addConfessionWall'
					},
					{
						id: 4,
						icons: 'icon-shiwuzhaoling',
						title: '发失物招领(开发中...)',
						info: '是谁的东西落下了，领一下',
						backgroundColor: "#9BDEAC",
						path: '../../packagesAdd/addLostFound'
					},
					{
						id: 5,
						icons: 'icon-xunwuqishi',
						title: '发寻物启示(开发中...)',
						info: '我的宝贝在哪',
						backgroundColor: "#4E2E81",
						path: '../../packagesAdd/addPosterFinding'

					}
				]
			}
		},
		
		computed: {
			...mapState('userModule', ["userInfo"])
		},

		onLoad() {
			const that = this

			// 获取窗口的高度
			uni.getSystemInfo({
				success: function(res) {
					that.windowHeight = res.windowHeight
				}
			})


			// 设置通知信息的值
			uni.request({
				url: baseUrl.host + '/api/getNotificationInformation', //仅为示例，并非真实接口地址。
				success: (res) => {
					this.notificationInformation = res.data.notificationInformation
				}
			});
		},

		methods: {
			// 去向添加页面
			goToAdd(feature) {
				uni.navigateTo({
					url: feature.path,
				})
			},

			// 关闭信息通知
			close() {
				this.$refs.popup.close()
			},

			//	将新的通知信息进行提交
			submit() {
				// 修改通知信息的值
				uni.request({
					url: baseUrl.host + '/api/putNotificationInformation', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						newNotificationInformation: this.notificationInformation
					},
					success: (res) => {
						uni.showToast({
							title: res.data.message
						})
					}
				});
			},
			
			// 手动获取最新的通知
			getNew(){
				uni.request({
					url: baseUrl.host + '/api/getNotificationInformation', //仅为示例，并非真实接口地址。
					success: (res) => {
						this.notificationInformation = res.data.notificationInformation
					}
				});
			}
		}
	}
</script>

<style scoped>
	.messageText {
		display: block;
		font-size: 30px;
		text-align: center;
		color: #E7536E;
	}

	.iconCenter {
		display: flex;
		align-items: center;
	}
</style>